<template>
  <div class="q-pa-sm">
    <q-card flat square>
      <q-card-section class="q-pa-none q-py-md row">
        <div class="col-sm col-xs-12 q-px-md q-pt-none">
          <h5>编辑企业</h5>
          <q-tab-panels v-model="settingsTab" animated transition-prev="fade" transition-next="fade" >
            <q-tab-panel name="basicSettings" class="row q-pt-sm" style="width:100%">
              <div class="col-md-12">
                <h6>基本信息</h6>
              </div>
              <div class="col-md-4 q-gutter-y-md q-pt-md q-pl-md q-pb-md">
                <div style="line-height: 40px;">
                  <q-icon name="star" color="red" />公司全称：
                  <q-input dense outlined placeholder="请输入公司全称" v-model="form.true_name" :rules="[requiredTest]" />
                </div>
                <div style="line-height: 40px;">
                  公司电话：
                  <q-input dense outlined placeholder="请输入公司电话" v-model="form.phone"/>
                </div>
              </div>
              <div class="col-md-4 q-gutter-y-md q-pt-md q-pl-md q-pb-md">
                <div style="line-height: 40px;">
                  <q-icon name="star" color="red" />公司简称：
                  <q-input dense outlined placeholder="请输入公司简称" v-model="form.extinfo.short_name" :rules="[requiredTest]" />
                </div>
                <div style="line-height: 40px;">
                  <q-icon name="star" color="red" />联系人：
                  <q-input dense outlined placeholder="请输入联系人"  v-model="form.extinfo.contact" :rules="[requiredTest]" />
                </div>
              </div>
              <div class="col-md-4 q-gutter-y-md q-pt-md q-pl-md q-pb-md">
                <div style="line-height: 40px;">
                  <q-icon name="star" color="red" />法定代表人：
                  <q-input dense outlined placeholder="请输入法定代表人" v-model="form.extinfo.present" :rules="[requiredTest]" />
                </div>
                <div style="line-height: 40px;">
                  <q-icon name="star" color="red" />联系方式：
                  <q-input dense outlined placeholder="请输入联系方式"  v-model="form.mobile" :rules="[requiredTest]" />
                </div>
              </div>
              <div class="col-md-12 q-gutter-y-md q-pt-md q-pl-md q-pb-md">
                <div style="line-height: 40px;">
                  公司地址:
                  <q-input dense outlined placeholder="请输入公司地址" v-model="form.address" />
                </div>
                <div style="line-height: 40px;">
                  公司介绍:
                  <q-input type="textarea" square outlined label="请输入公司介绍"  v-model="form.extinfo.content" />
                </div>
                <div style="line-height: 40px;">
                  公司备注:
                  <q-input type="textarea" square outlined label="请输入备注"  v-model="form.extinfo.remark" />
                </div>
                <div style="line-height: 40px;">
                  附件信息:
                  <q-btn color="primary" @click="download()" label="授权书模板下载" style="width: 160px" />
                  <q-uploader ref="keyFileUploader1" color="info" auto-upload :url="uploadUrl" no-thumbnails label="授权书"   @uploaded="uploadedFiles"  field-name="file" multiple style="width: 700px" >
                    <template v-slot:list="scope">
                      <q-list separator>
                        <q-item v-for="(onefile,index) in authorFileList" v-bind:key="index">
                          <q-item-section  thumbnail  >
                            <img :src="onefile.url" alt="授权书">
                          </q-item-section>
                          <q-item-section class="col-xl-2 center"  style="width:288px;overflow: hidden"  >
                            {{onefile.name}}
                          </q-item-section>
                          <q-item-section class="col-1 right"  side>
                            <q-btn  size="sm" flat dense round  @click="readyDeleteImg(1 ,0, index)">删除</q-btn>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </template>
                  </q-uploader>
                  <q-separator/>
                  <q-uploader ref="keyFileUploader2" color="info" auto-upload :url="uploadUrl" label="营业执照"  @uploaded="uploadedFiles2" no-thumbnails field-name="file" style="width: 700px">
                    <template v-slot:list="scope">
                      <q-list separator>
                        <q-item v-for="(onefile,index) in businessLicenseFileList" v-bind:key="index">
                          <q-item-section  thumbnail  >
                            <img :src="onefile.url">
                          </q-item-section>
                          <q-item-section class="col-xl-2 center"  style="width:288px;overflow: hidden"  >
                            {{onefile.name}}
                          </q-item-section>
                          <q-item-section class="col-1 right"  side>
                            <q-btn  size="sm" flat dense round  @click="readyDeleteImg(1 ,0, index)">删除</q-btn>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </template>
                  </q-uploader>
                  <q-separator/>
                  <q-uploader ref="keyFileUploader3" color="info" auto-upload :url="uploadUrl"  label="公司LOGO" @uploaded="uploadedFiles3" field-name="file" style="width: 700px">
                    <template v-slot:list="scope">
                      <q-list separator>
                        <q-item v-for="(onefile,index) in logoFileList" v-bind:key="index">
                          <q-item-section  thumbnail  >
                            <img :src="onefile.url">
                          </q-item-section>
                          <q-item-section class="col-xl-2 center"  style="width:288px;overflow: hidden"  >
                            {{onefile.name}}
                          </q-item-section>
                          <q-item-section class="col-1 right"  side>
                            <q-btn  size="sm" flat dense round  @click="readyDeleteImg(1 ,0, index)">删除</q-btn>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </template>
                  </q-uploader>
                  <q-separator/>
                  <q-uploader ref="keyFileUploader4" color="info" auto-upload :url="uploadUrl" label="其它附件"   @uploaded="uploadedFiles4" field-name="file" multiple style="width: 700px" >
                    <template v-slot:list="scope">
                      <q-list separator>
                        <q-item v-for="(onefile,index) in otherFileList" v-bind:key="index">
                          <q-item-section  thumbnail  >
                            <img :src="onefile.url">
                          </q-item-section>
                          <q-item-section class="col-xl-2 center"  style="width:288px;overflow: hidden"  >
                            {{onefile.name}}
                          </q-item-section>
                          <q-item-section class="col-1 right"  side>
                            <q-btn  size="sm" flat dense round  @click="readyDeleteImg(1 ,0, index)">删除</q-btn>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </template>
                  </q-uploader>
                  <q-separator/>
                </div>
                <span class="text-left block">
                  <q-btn  label="保存" size="md" color="primary" class="btn-close" style="width:150px;" @click="saveForm" />
                </span>
              </div>
            </q-tab-panel>

          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
export default {
  name: 'Settings',
  data() {
    return {
      search_name: '',
      business_license_img: '',
      user_status: {label: '已认证', value: 3},
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        detail: '/shopdetail',
        save_username: '/setusername',
        save_usermobile: '/setusermobile',
        save_shopadd: '/shopadd',
        save_shopedit: '/shopupdate',
        save_userstatus: '/setuserstatus'
      },
      uploadUrl: `${process.env.BASE_URL}/uploadfile`,
      userinfo: {
        uid: '',
        avatar: 'http://img.gzzsu.com/654321',
        mobile: '',
        name: '',
        status: ''
      },
      settingsTab: 'basicSettings',
      form: {
        sid: 0,
        present: '',
        extinfo: {
          present: '',
          extinfo: '',
          short_name: '',
          authorFileList: [],
          businessLicenseFileList: [],
          logoFileList: [],
          otherFileList: [],
        }
      },
      user_group_option: [{ label: '普通用户', value: 0} ,{ label: '服务商', value: 1} ],
      user_group: { label: '普通用户', value: 0},
      authorFileList: [],
      businessLicenseFileList: [],
      logoFileList: [],
      otherFileList: [],
      attachments: [],
      file_list: [],
    };
  },
  methods:{
    requiredTest,
    addBefore() {
    },
    queryParam(){
    },
    DialogStocklog() {
    },
    readyDeleteImg() {

    },
    getTypeLabel( b ){
      console.log(b)
      if(b == 0){
        return '隐藏'
      }else{
        return '显示'
      }
    },
    uploadedFiles({ xhr }) {
      const response = JSON.parse(xhr.responseText);
      if (response.code == 0) {
        //this.form.avatar = response.message;
        this.$q.notify('上传成功')
        if(response == 'xls' ){
          this.authorFileList.push({name: response.data.fileName ,  url: response.data.url })
        }else{
          this.authorFileList.push({name: response.data.fileName ,  url: response.data.url })
        }
        this.attachments.push(response.data.fileName)
      } else {
        this.$q.notify({
          color: 'red',
          message: response.msg,
        });
        this.$refs.keyFileUploader1.removeUploadedFiles();
      }
    },
    uploadedFiles2({ xhr }) {
      const response = JSON.parse(xhr.responseText);
      if (response.code == 0) {
        //this.form.avatar = response.message;
        this.$q.notify('上传成功')
        this.businessLicenseFileList.push({name: response.data.fileName ,  url: response.data.url })
      } else {
        this.$q.notify({
          color: 'red',
          message: response.msg,
        });
        this.$refs.keyFileUploader2.removeUploadedFiles();
      }
    },
    uploadedFiles3({ xhr }) {
      const response = JSON.parse(xhr.responseText);
      if (response.code == 0) {
        //this.form.avatar = response.message;
        this.$q.notify('上传成功')
        this.logoFileList.push({name: response.data.fileName ,  url: response.data.url })
      } else {
        this.$q.notify({
          color: 'red',
          message: response.msg,
        });
        this.$refs.keyFileUploader3.removeUploadedFiles();
      }
    },
    uploadedFiles4({ xhr }) {
      const response = JSON.parse(xhr.responseText);
      if (response.code == 0) {
        this.$q.notify('上传成功')
        this.otherFileList.push({name: response.data.fileName ,  url: response.data.url })
      } else {
        this.$q.notify({
          color: 'red',
          message: response.msg,
        });
        this.$refs.keyFileUploader4.removeUploadedFiles();
      }
    },
    download() {

    },
    saveForm(){
      this.form.sid = this.userinfo.id
      this.form.id = this.$route.query.id
      if (this.form.true_name !== '' && this.form.seller_name !== '' && this.form.short_name !== ''
        && this.form.mobile !== '' && this.form.present !== '') {

        if (this.authorFileList.length > 0) {
          this.form.extinfo.authorFileList = this.authorFileList
        }
        if (this.businessLicenseFileList.length > 0) {
          this.form.extinfo.businessLicenseFileList = this.businessLicenseFileList
        }
        if (this.logoFileList.length > 0) {
          this.form.extinfo.logoFileList = this.logoFileList
        }
        if (this.otherFileList.length > 0) {
          this.form.extinfo.otherFileList = this.otherFileList
        }
        // this.form.extinfo.business_license_img = this.business_license_img
        console.log(this.form)
        this.$axios.post(this.url.save_shopedit, this.form).then((r) => {
          if(r.code == 0){
            this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
          } else {
            this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', message: r.msg,});
          }
        });
      } else {
        this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '请填写完整信息！！',});
      }

    },
    save_user_status(){
      this.form.uid = this.form.uid
      this.form.status = this.user_status.value // 0 待认证 ,1 未认证, 3:认证用户
      this.$axios.post(this.url.save_userstatus, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
        }
      });
    },
    // importAvatar() {
    //   this.$refs.avatarUploader.pickFiles();
    // },
    // importedAvatar({ xhr }) {
    //   const response = JSON.parse(xhr.responseText);
    //   if (response.code == 0) {
    //     this.businessLicenseFileList.push({name: response.data.fileName ,  url: response.data.url })
    //     this.business_license_img = response.data.url
    //     console.log(this.business_license_img)
    //     this.$q.notify('上传成功');
    //   } else {
    //     this.$q.notify({
    //       color: 'red',
    //       message: '上传失败',
    //     });
    //   }
    //   this.$refs.avatarUploader.removeUploadedFiles();
    // },
    getShopDetail(){
      const id = this.$route.query.id
      this.$axios.post(this.url.detail, {id: id}).then((r) => {
        if(r.code == 0){
          this.form = r.data
          if (r.data.extinfo) {
            if (r.data.extinfo.authorFileList && r.data.extinfo.authorFileList.length > 0) {
              this.authorFileList = r.data.extinfo.authorFileList
            }
            if (r.data.extinfo.businessLicenseFileList && r.data.extinfo.businessLicenseFileList.length > 0) {
              this.businessLicenseFileList = r.data.extinfo.businessLicenseFileList
            }
            if (r.data.extinfo.logoFileList && r.data.extinfo.logoFileList.length > 0) {
              this.logoFileList = r.data.extinfo.logoFileList
            }
            if (r.data.extinfo.otherFileList && r.data.extinfo.otherFileList.length > 0) {
              this.otherFileList = r.data.extinfo.otherFileList
            }
            // if (r.data.extinfo.business_license_img && r.data.extinfo.business_license_img.length > 0) {
            //   this.business_license_img = r.data.extinfo.business_license_img
            // }
          }

        }
      });
    },
    close() {
      // this.$router.go(-1);
      // this.$router.push({
      //   path: '/member/list',
      //   query: { name: this.search_name ? this.search_name : '' }
      // })
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.userInfo);
    this.getShopDetail()
    // const user_id = this.$route.query.id
    // this.search_name = this.$route.query.name
  },
};
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_1fgggi4y4wt.css';
</style>
